<template>
  <div class="container">
    <div class="top-title">
      <img class="logo" src="@/assets/logo.png" />
      <div class="title">{{title}}</div>
      <div class="date-time">{{week}} {{nowDate}} {{nowTime}}</div>
    </div>
    <div class="content-pages">
      <div class="left-nav-box">
        <ul class="ul-list">
          <li
            v-for="(item,index) in pageList"
            @click="tabClick(index)"
            :class="{active:index==tabIndex}"
            :key="item.id"
          >
            <span class="iconfont" :class="item.className"></span>{{item.title}}
          </li>
        </ul>
      </div>
      <div class="right-content-box">
        
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      pageList: [
        // { title: "素质拓展数据1", id: 1, className: "iconshouye" },
        // { title: "素质拓展数据2", id: 2, className: "iconshuju" },
        { title: "大活场地数据", id: 3, className: "iconsuyang" },
        { title: "物资管理数据", id: 4, className: "iconxinglifenjian" }
      ],
      title:'大学生活动数据',
      tabIndex: 0,
      isCollapse:false,
      
      week:"",
      nowDate: "",
      nowTime: "",
      weekArr:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
      setting:false,
    };
  },
  methods: {
    // 获取当前时间函数
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      let hh =
        new Date(timeStamp).getHours() < 10
          ? "0" + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours();
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? "0" + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes();
      let ss =
        new Date(timeStamp).getSeconds() < 10
          ? "0" + new Date(timeStamp).getSeconds()
          : new Date(timeStamp).getSeconds();
      this.nowDate = year + "-" + month + "-" + date + " " + " ";
      this.nowTime = hh + ":" + mm + ":" + ss;
      var dateString = this.nowDate;
      var dateObject = new Date(dateString);
      this.week = this.weekArr[dateObject.getDay()];
    },
    // 定时器函数
    nowTimes() {
      this.timeFormate(new Date());
      setTimeout(this.nowTimes,1000);
    },
    tabClick(idx) {
      this.tabIndex = idx;
      localStorage.setItem('tabIndex',idx);
      let url = this.$route.path;
      switch (idx) {
        // case 0:
        //   if(url=='/') return;
        //   this.$router.push({
        //     path:'/'
        //   })
        //   this.title = '素质拓展数据1'
        //   break;
        // case 1:
        //   if(url=='/hostData') return;
        //   this.$router.push({
        //     path:'/hostData'
        //   })
        //   this.title = '素质拓展数据2'
        //   break;
        case 0:
          if(url=='/realTimeData') return;
          this.$router.push({
            path:'/realTimeData'
          })
          this.title = '大活场地数据'
          break;
        case 1:
          if(url=='/luggageSorting') return;
          this.$router.push({
            path:'/luggageSorting'
          })
          this.title = '物资管理数据';
          break;
        default:
          break;
      }
    }
  },
  created(){
    this.tabIndex = localStorage.getItem('tabIndex') || 0
    this.nowTimes();
    //键盘上下键控制页面切换,可以循环点击
    document.addEventListener('keydown',(e)=>{
      if(e.keyCode==38){
        this.tabIndex--;
        if(this.tabIndex<0) {
          this.tabIndex = this.pageList.length -1;
        };
        this.tabClick(this.tabIndex)
      }else if(e.keyCode==40){
        this.tabIndex++;
        if(this.tabIndex>this.pageList.length-1) {
          this.tabIndex = 0;
        };
        this.tabClick(this.tabIndex)
      }
    })
    if(this.$route.path=='/luggageSorting'){
      this.title = '物资管理数据';
    }
  }
};
</script>
<style>
@import "//at.alicdn.com/t/font_1910781_ufsekay8sk.css";
</style>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: auto;
  }
.container {
  background: #323436;
  color: #fff;
  .top-title {
    height: 48px;
    position: relative;
    background: linear-gradient(180deg,rgba(69,71,74,1) 0%,rgba(56,57,60,1) 100%);
    border-bottom: 2px solid #1E1F20;
    .title {
      width: 416px;
      height: 70px;
      margin: auto;
      text-align: center;
      line-height: 70px;
      background: url("../assets/title-bg.png") no-repeat center center;
      background-size: 100% 100%;
      position: relative;
      z-index: 2;
      font-size: 28px;
    }
    .logo {
      width: 111px;
      height: 30px;
      float: left;
      // margin-left: 240px;
      margin-left: 40px;
      margin-top: 10px;
    }
    .date-time {
      position: absolute;
      right: 40px;
      top: 0;
      font-size: 16px;
      line-height: 50px;
      color: rgba(255, 255, 255, 0.6);
    }
    .menu{
      position: absolute;
      left: 0px;
      top: 0px;
      bottom: 0;
    }
  }
  .content-pages {
    margin: 40px 30px 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .left-nav-box {
      .ul-list {
        li {
          width: 210px;
          height: 56px;
          text-align: center;
          line-height: 56px;
          background: #656768;
          border: 1px solid #656768;
          cursor: pointer;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.4);
          .iconfont {
            margin-right: 10px;
          }
        }
        li + li {
          margin-top: 20px;
        }
        .active {
          background: #1868E4;
          color: #fff;
        }
      }
    }
    .right-content-box {
      padding-left: 20px;
      flex: 1;
      box-sizing: border-box;
    }
  }
}
</style>